<template>
  <div class="addressBox">
    <div class="top">
      <div class="tip">
        已保存收货地址
      </div>
      <div
        class="btn"
        @click="showModal('add')"
      >
        +新建地址
      </div>
    </div>
    <div class="addressList">
      <div
        v-for="item in infoList"
        :key="item.id"
        class="address_item"
      >
        <div class="item_left">
          <div class="item_name">
            <div class="nameBig">
              {{ item.cReceiver.charAt(0) }}
            </div>
            <div>{{ item.cReceiver }}</div>
          </div>
          <div class="item_address">
            <div>{{ item.cMobile }}</div>
            <div>
              {{ item.cProvince }}{{ item.cCity }}{{ item.cArea
              }}{{ item.cStreet }}{{ item.cAddress }}
            </div>
          </div>
        </div>
        <div class="item_right">
          <div class="edit">
            <span @click="editAddress(item)">编辑</span>
            <span @click="deleteAddress(item)">删除</span>
          </div>
          <div
            class="oaddress"
            :class="{ active: item.bDefault }"
            @click="SetDefault(item)"
          >
            默认地址
          </div>
        </div>
      </div>
    </div>
    <addressModal
      ref="addrssModals"
      :edititem="edit_item"
      @saveAddress="saveAddress"
    />
    <delModal
      ref="delModals"
      @result="confirmResult"
      @refresh="getData"
    />
  </div>
</template>

<script>
import addressModal from "../../components/common/addressModal.vue";
import delModal from "../../components/common/deleteModal.vue";
export default {
  components: {
    addressModal,
    delModal,
  },
  data() {
    return {
      visiable: false,
      infoList: [],
      current_item: {},
      edit_item: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //弹窗
    showModal(status) {
      this.$refs.addrssModals.showM("true", status);
    },

    //关闭弹窗
    closeModal(e) {
      this.visiable = e;
    },
    //获取地址列表
    getData() {
      let data = {
        token: localStorage.getItem("token"),
      };
      this.$api.person.addressList(data).then((res) => {
        // 执行某些操作
        if (res.code == 200) {
          this.infoList = res.data;
        }
      });
    },
    //新增地址
    saveAddress(e) {
      console.log(e);
      let params = {
        data: e,
        token: localStorage.getItem("token"),
      };
      this.$api.person.addAddress(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getData();
        }
      });
    },
    //删除地址
    deleteAddress(item) {
      console.log(item);
      this.current_item = item;
      this.$refs.delModals.showM("delete", "address");
      this.$refs.delModals.getItem(item);
    },
    //编辑地址
    editAddress(item) {
      this.edit_item = item;
      this.$refs.addrssModals.showM("true", "edit");
    },
    //弹窗 点击确认
    confirmResult() {
      let params = {
        data: this.current_item,
        token: localStorage.getItem("token"),
      };
      this.$api.person.deleteAddress(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getData();
        }
      });
    },
    // 设为默认地址
    SetDefault(SetDefault) {
      console.log('设为默认地址', SetDefault)
      if(!SetDefault.bDefault) {
        this.$set(SetDefault,'bDefault', true )
        console.log('设为默认地址', SetDefault)
        let params= {
          token: localStorage.getItem("token"),
          data: SetDefault
        }
        this.$api.person.addAddress(params).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
      } else {
        return false
      }
      
    }
  },
};
</script>

<style scoped lang="scss">
.addressBox {
  padding: 2.81rem 1.56rem;
  background: #fff;

  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.13rem;

    .tip {
      font-size: 1.13rem;
      color: #333;
    }

    .btn {
      width: 7.56rem;
      height: 2.25rem;
      background: rgba(11, 11, 11, 1);
      border-radius: 1rem;
      text-align: center;
      line-height: 2.25rem;
      font-size: 1.13rem;
      color: #fff;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .addressList {
    .address_item {
      background: #f5f5f5;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 2.13rem;
      margin-bottom: 0.56rem;

      .item_left {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .item_name {
          display: flex;
          flex-direction: row;
          align-items: center;
          color: #666;
          font-size: 0.88rem;
          margin-right: 2.62rem;

          .nameBig {
            width: 4.44rem;
            height: 4.44rem;
            font-size: 2rem;
            text-align: center;
            line-height: 4.44rem;
            color: #fff;
            background-color: #000;
            margin-right: 0.75rem;
            border-radius: 50%;
          }
        }

        .item_address {
          font-size: 0.88rem;
          color: #666;
          width: 20.13rem;

          > div {
            line-height: 1.75rem;
          }
        }
      }

      .item_right {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .edit {
          color: #f0406f;
          font-size: 0.88rem;
          margin-right: 6.44rem;

          span {
            margin-right: 1.75rem;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .oaddress {
          // cursor: pointer;
          width: 7.06rem;
          height: 2.25rem;
          background: rgba(245, 245, 245, 1);
          border: 0.06px solid rgba(181, 181, 181, 1);
          border-radius: 0rem;
          line-height: 2.25rem;
          text-align: center;
          font-size: 0.88rem;
          color: #888;
          cursor: pointer;
          // &:hover {
          // 	cursor: pointer;
          // 	width: 7.06rem;
          // 	height: 2.25rem;
          // 	background: #f0406f;
          // 	border: 0.06px solid #f0406f;
          // 	border-radius: 0rem;
          // 	line-height: 2.25rem;
          // 	text-align: center;
          // 	font-size: 0.88rem;
          // 	color: #fff;
          // }
        }

        .active {
          // cursor: pointer;
          width: 7.06rem;
          height: 2.25rem;
          background: #f0406f;
          border: 0.06px solid #f0406f;
          border-radius: 0rem;
          line-height: 2.25rem;
          text-align: center;
          font-size: 0.88rem;
          color: #fff;
        }
      }
    }
  }
}
</style>
